<template>
    <div class="content">
        <div
            v-for="item in list.data"
            :key="item.name"
            class="business"
        >
            <p class="business-name">
                <IconPro0 class="business-name-icon"/>
                <span>{{ item.name }}方向</span>
            </p>
            <ul class="product">
                <li
                    v-for="ite in item.children"
                    :key="getValue(ite, '产品名称')"
                    class="product-item"
                >
                    <p
                        class="product-name"
                        :title="getValue(ite, '产品名称')"
                    >
                        {{ getValue(ite, '产品名称') }}
                    </p>
                    <div class="product-funcLogo">
                        <div
                            v-for="(item, idx) in functionIDList"
                            :key="idx"
                        >
                            <span
                                v-if="getValue(ite, item.label) === '是'"
                                class="funcLogo"
                                :style="`background: ${item.bg}`"
                                :title="item.tip"
                            >
                                {{ item.abbreviation }}
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import list from '@/config/function.json';
import {getValue} from '@/utils';

const functionIDList = [
    {
        label: '值班机制',
        abbreviation: '值',
        tip: '有完整的值班机制和流程',
        bg: '#98c9d8',
    },
    {
        label: '数字单元化',
        abbreviation: '单',
        tip: '已接入数据单元化功能',
        bg: '#9fd0d5',
    },
    {
        label: '用户手册',
        abbreviation: '册',
        tip: '具备产品使用相关文档，完备的用户手册',
        bg: '#aedfdc',
    },
    {
        label: '用户群',
        abbreviation: '群',
        tip: '已创建用户群',
        bg: '#cad9d6',
    },
    {
        label: '监控机制',
        abbreviation: '监',
        tip: '具有完整的监控机制',
        bg: '#d0cdcc',
    },
    {
        label: '预警',
        abbreviation: '警',
        tip: '有预警机制，预警信息会发送到产品预警群',
        bg: '#738dcd',
    },
    {
        label: '反馈机制',
        abbreviation: '反',
        tip: '产品具备较好的用户反馈功能',
        bg: '#d8bdf2',
    },
    {
        label: '工程质量通知',
        abbreviation: '质',
        tip: '已接入敏捷机器人，能够及时收到敏捷迭代合规率的群消息',
        bg: '#bce2ef',
    },
];
</script>

<style lang="less" scoped>
@import (reference) url('assets/styles/common.less');
.content {
    .product {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 18px 24px;
        &-item {
            padding-bottom: 16px;
        }
        &-funcLogo {
            display: flex;
            padding: 5px 16px;
            span {
                width: 24px;
                height: 24px;
                margin-right: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: @const-white-color;
                font-size: 12px;
                font-weight: bolder;
                border-radius: 6px;
            }
        }
        &-name {
            width: 100%;
            padding: 5px 16px;
            margin-bottom: 10px;
            .text-ellipsis();
            font-size: @font-size-title;
            font-weight: bold;
            color: @const-white-color;
            background: linear-gradient(to right, @theme-color, @theme-light-color);
        }
    }
}
</style>
